<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #test {
            width: 600px;
            height: 300px;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div id="test">
        <button onclick="min()">最小化</button>
        <button onclick="max()">最大化</button>
        <button onclick="newOpen()">新窗口打开</button>
        <button onclick="clos()">关闭</button>
        <div class="content">
            内容
        </div>
    </div>
</body>
<script>
    function min() {
        console.log('min');
        var node = document.getElementById("test");
        node.style.height = '10px';
        node.style.width = '10px';

    }


    function max() {
        console.log('max');
        debugger;
        var node = document.getElementById("test");
        node.style.height = screen.availHeight;
        node.style.width = screen.availWidth;
        window.scrollTo(0, 0);
        window.resizeTo(screen.availWidth, screen.availHeight);
    }

    function newOpen(url) {
        if (!url) {
            url = window.location.url;
        }
        //fullScreen = yes 如何要全屏的话
        var feature = 'top=0, left=0,toolbar=no,menubar=yes, scrollbars=yes, resizable=yes,location=no,status=no,channelmode = yes';
        var newwindows = window.open(url, "", feature);
        newwindows.moveTo(0, 0); //将新页面打开位置定位在屏幕左上角  
        newwindows.resizeTo(screen.width, screen.height); //设置新页面的大小~实际上也可以在上面的属性中设置~不过~不能最大化~原因未知~坐等牛人解答~  
        if (newwindows != null) {
            newwindow.focus(); //新页面获得焦点  
        }
    }

    function clos() {
        console.log('close');
        var node = document.getElementById("test");
        node.parentNode.removeChild(node);
    }
</script>




</html>